<template>
  <div class="mv">
	  <div class="mv-title">
		  <h4>全部MV</h4>
	  </div>
	  <div id="">
		  语种：
	  	<span v-for="(item,index) in area" :key="index"
	  	:class="index===currentIndex?'active':''"
	  	@click="areaHandle(index,item)" class="itemWidth">{{item}}</span>
	  </div>
	  <div id="">
	  	分类：
		<span v-for="(item,index) in type" :key="index"
		:class="index===typeCurrentIndex?'active':''"
		@click="typeHandle(index,item)" class="itemWidth">{{item}}</span>
	  </div>
	  <div id="">
	  	排序：
		<span v-for="(item,index) in order" :key="index"
		:class="index===orderCurrentIndex?'active':''"
		@click="orderHandle(index,item)" class="itemWidth">{{item}}</span>
	  </div>
	  
	  <mv-list :mvList="firstMvList"></mv-list>
  </div>
</template>

<script>
import {_getMv} from "network/mv.js"
import MvList from "components/content/mv-list/mv-list.vue"
const  area=['全部','内地','港台','欧美','日本','韩国'];
const  type=['全部','官方版','原声','现场版','网易出品'];
const  order=['上升最快','最热','最新'];
export default {
  name:'allMv',
  components:{MvList},
  data(){
    return{
     area,
	 type,
	 order,
	 paramsmv:{
		 area:'全部',
		 type:'全部',
		 order:'上升最快',
		 limit:40,
		 offset:0
	 },
	 firstMvList:[],
	 personalizedMvList:[],
	 currentIndex:0,
	 typeCurrentIndex:0,
	 orderCurrentIndex:0,
	 currentPersonalizeIndex:-1,
	 permission:[],
    }
  },
  created(){
	  this.getList()
  },
  methods:{
     getList(){
	   _getMv(this.paramsmv).then(res=>{
		   this.firstMvList=res.data.data
		   console.log(this.firstMvList)
	   })
	 
    },
	areaHandle(index,val){
		this.currentIndex = index;
		this.paramsmv.area= val;
		this.getList()
	},
    typeHandle(index,val){
		this.typeCurrentIndex = index;
		this.paramsmv.type= val;
		this.getList()
	},
	orderHandle(index,val){
		this.orderCurrentIndex = index;
		this.paramsmv.order= val;
		this.getList()
	},
  }
}
</script>

<style lang="less" scoped>
.mv{
	padding: 20px 70px;
	.mv-title{
		display: flex;
		position: relative;
		div{
			width: 60px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
		
	}
}
h4{
	height: 40px;
	line-height: 30px;
	// width: 80px;
	padding: 0 0;
  }
  .active{
	  color: #0C73C2;
  }
  .el-icon-arrow-right {
	  position: absolute;
	  right: 0;
	  top: 10px;
	  font-size: 20px;
  }
  .itemWidth{
	  display: inline-block;
	  width: 100px;
	  height: 40px;
	  text-align: center;
	  // margin-left: 20px;
  }
</style>